<template>
  <vxe-modal v-model="modalVisible" ref="xModal" title="新增成员" width="600" resize remember>
    <template>
      <vxe-form
          ref="xForm"
          class="data-form"
          title-align="right"
          title-width="60"
          :data="formData"
          :rules="formRules">
        <vxe-form-item title="姓名" field="Projuserid" span="24">
          <template v-slot="scope">
            <!--                        <select-project-team v-model="formData.Projuserid" placeholder="请输入姓名匹配"></select-project-team>-->
            <select-project-team v-model="formData.Projuserid" :clearable="true" :url="userApi" getPage="getPage"
                                 responseData="Users" :queryValue="{}" searchKeyword="keywords" placeholder="请选择姓名"
                                 column="Realname" clickValue="Userid" showValue="Realname"></select-project-team>
          </template>
        </vxe-form-item>
        <vxe-form-item title="角色" field="Role" span="24">
          <template v-slot="scope">
            <select-diction v-model="formData.Role" DictTypeCode="USER_ROLE" :placeholder = "'成员角色'"></select-diction>
          </template>
        </vxe-form-item>
        <vxe-form-item title="" span="24" align="center">
          <template>
            <el-button v-throttle="[submitEvent, `click`, 3000]" type="primary" :loading="saveLoading">添加成员</el-button>
            <el-button @click="modalVisible = false">关闭</el-button>
          </template>
        </vxe-form-item>
      </vxe-form>
    </template>
  </vxe-modal>
</template>

<script>
import SelectProjectTeam from "@/components/element/select/SelectProjectTeam";
import projectTeamApi from "@/api/projectTeamApi";
import userApi from '@/api/userApi'
import SelectDiction from '@/components/element/SelectDiction'

export default {
  components: {
    SelectProjectTeam,
    SelectDiction
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    teamId: {
      type: [String, Number],
      require: true
    }
  },
  computed: {
    modalVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data() {
    return {
      saveLoading: false,
      userApi: userApi,
      formData: {
        userId: '',
        Role: ''
      },
      formRules: {
        Projuserid: [{required: true, message: '请选择人员', trigger: 'change'}]
      }
    }
  },
  methods: {
    submitEvent() {
      let _this = this
      _this.$refs.xForm.validate().then(() => {
        let user = {
          Projectid: this.$route.params.id,
          Userids: [this.formData.Projuserid],
          Role: this.formData.Role
        }
        this.saveLoading = true
        projectTeamApi.addTeamUser(user).then(res => {
          this.$XModal.message({message: res.message, status: res.code === 1 ? 'success' : 'error'})
          if (res.code === 1) this.modalVisible = false
          this.$emit('search')
        }).finally(() => {
          this.saveLoading = false
        })
      }).catch((_) => {})
    }
  }
}
</script>

<style>

</style>
